<template>
  <div>
    <el-form :model="formData" :rules="rules">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" />
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input v-model="formData.checkPass" />
      </el-form-item>
      <el-form-item>
        <el-button @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data() {
    // 返回rules的时候会定义一个函数
    // 失去焦点的时候会被调用的函数
    const validPassword = (rule, val, callback) => {
      // val 当前用户输入的值
      const isValid = val === this.formData.password
      if (isValid) {
        // 成功
        callback()
      } else {
        // 失败
        callback(new Error('请输入密码'))
      }
    }
    return {
      formData: {
        mobile: '',
        password: '',
        checkPass: ''
      },
      rules: {
        // 规则对象里面每个属性，都是根数据对象字段对应
        mobile: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { pattern: /^1[3,9][0-9]{9}$/, message: '请输入正确手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { min: 6, max: 12, message: '密码在6-12位之间', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '该项不能为空', trigger: 'blur' },
          { validator: validPassword, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.$store.dispatch('user/getProfile')
  },
  methods: {
    login() {
      console.log(this.formData)
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
